<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>${shop.name!""}</title>
<link rel="stylesheet" href="${siteurl}assets/css/www-pkg.css" />
[#include "/theme/yelp/common/scripts.html"]
<link rel="stylesheet"
	href="${siteurl}assets/plugs/kindeditor/themes/default/default.css" />
<script charset="utf-8"
	src="${siteurl}assets/plugs/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8"
	src="${siteurl}assets/plugs/kindeditor/lang/zh_CN.js"></script>
	
<script charset="utf-8"
	src="${siteurl}assets/plugs/uploader/dmuploader.min.js"></script>	
<link rel="stylesheet"
	href="${siteurl}assets/plugs/uploader/uploader.css" />	
</head>

<body class="country-hk logged-out ytype jquery" id="yelp_main_body"
	ryt13230="1">

	<div id="fb-root"></div>

	<div class="lang-en" id="wrap">



		[#include "/theme/yelp/common/header.html"]

		<div id="print-masthead">
			<img alt="Yelp" class="print-bkg-img"
				src="http://s3-media2.fl.yelpcdn.com/assets/2/www/img/b7e9d647188d/gfx/header_print.gif">
		</div>

		<span class="offscreen" id="page-content">&nbsp;</span>

		<div class="main-content-wrap main-content-wrap--box">

			<div class="content-container" id="super-container">


				<div id="alert-container"></div>


				<div class="container user_biz_photo">
					<div class="clearfix layout-block layout-full">
						<div class="column column-alpha ">
							<div id="user_biz_photo_intro">
								<h2>
									<a href="${siteurl}/shop/view.htm?id=${shop.id}">${shop.name!""}</a> 新增相片
								</h2>

								<a
									href="${siteurl}/shop/photos.htm?id=${shop.id}">查看全部相片</a><br>
								<br>
							</div>


					





							<div id="html-uploader" style="display: none;" >





									<form action="${siteurl}/shop/addphoto.htm" class="yform ytype" enctype="multipart/form-data" id="upload_new_photo" method="POST" name="upload_new_photo">
										<input type="hidden" name="shop.id"  value="${shop.id}">
										<input type="hidden" name="id" value="${shop.id}">
										 <label>選擇檔案上載</label>
												<div>
										<input type="text" style="display: inline-block; width: 300px" value="" id="url1" readonly="readonly" required="required" name="url"> <input type="button" value="选择图片" id="image1">
									</div>
										
										
										
										 <label for="caption">新增一個說明字幕</label>

										<textarea name="messages"></textarea>


										<button name="action_submit" type="submit" value="Add Photo" class="ybtn ybtn-primary ybtn-small ytype">
											<span>新增相片</span>
										</button>
									</form>
								</div>



         <div class="form-group">
            <form action="${siteurl}/shop/addphotos.htm" class="yform ytype" enctype="multipart/form-data" id="upload_new_photo" method="POST" name="upload_new_photo">
                	<input type="hidden" name="id" value="${shop.id}">
                <label class="col-sm-2"></label>
                <div class="col-sm-8">
                    <!-- D&D Zone-->
                    <div id="drag-and-drop-zone" class="uploader">
                        <div class="browser"  style="margin-top: 15px;margin-bottom: 10px;">
                            <label >
                                <span>点击选择图片</span>
                                <input class="ybtn ybtn-primary ybtn-small ytype" type="file" name="files[]" accept="image/*" multiple="multiple" title='点击添加图片'/>
                            </label>
                        </div>
                    </div>
                    <!-- /D&D Zone -->

                    <div class="panel panel-default">
                        <div class="panel-body demo-panel-files" id='upload-albums'>
                            <span class="demo-note">您还没有上传图片</span>
                        </div>
                    </div>
                </div>
                	<button name="action_submit" type="submit" value="Add Photo" class="ybtn ybtn-primary ybtn-small ytype">
											<span>新增相片</span>
				</button>
			</form>
            </div>



						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- google_ad_section_start(weight=ignore) -->
		<!-- <a href="/biz/outlook-autumn-market-fundamental-catwalk-flimsy-roost-legibility-individualism-grocer-predestination-2">yelp</a> -->
		[#include "/theme/yelp/common/footer.html"]


	</div>


<script type="text/javascript">
KindEditor.ready(function(K) {
	var editor = KindEditor.editor({
		allowFileManager : true,
		uploadJson : '${siteurl}/image/upimgwork.htm'
	});
	K('#image1').click(
			function() {
				editor.loadPlugin('image', function() {
					editor.plugin.imageDialog({
						imageUrl : K('#url1').val(),
						clickFn : function(url, title, width, height,
								border, align) {
							K('#url1').val(url);
							editor.hideDialog();
						}
					});
				});
			});
});




	J = jQuery;
	//require('dmuploader');
	
	$.album = $.extend( {}, {
	    
	    addFile: function(id, i, file){
			var filename = file.name;
			if (filename && filename.length > 30) {
				filename = filename.substring(0, 30) + '...';
			}
			var template = '<div id="album-file' + i + '" class="uploader-item">' +
							   '<button type="button" class="close uploader-close" data-action="remove-album"><span>×</span></button>' +
			                   '<div class="uploader-image-preview"><img src="http://placehold.it/48.png" /></div>' +
			                   '<span class="uploader-file-id">第' + (i + 1) + '张</span> - <span class="uploader-file-name">' + filename + '</span> <span class="uploader-file-size">(' + $.album.humanizeSize(file.size) + ')</span><br />状态: <span class="uploader-file-status">等待上传</span>'+
			                   '<div class="progress active">'+
			                       '<div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">'+
			                           '<span class="sr-only">0% Complete</span>'+
			                       '</div>'+
			                   '</div>'+
			                   '<input type="hidden" name="images" value=""/>' +
			               '</div>';
			               
			var i = $(id).attr('file-counter');
			if (!i){
				$(id).empty();
				i = 0;
			}
			
			i++;
			
			$(id).attr('file-counter', i);
			
			$(id).prepend(template);
		},
		
		updateFileStatus: function(i, status, message){
			$('#album-file' + i).find('span.uploader-file-status').html(message).addClass('uploader-file-status-' + status);
		},
		
		updateFileData: function(i, data){
			$('#album-file' + i).find('input').val(data.data);
		},
		
		updateFileProgress: function(i, percent){
			$('#album-file' + i).find('div.progress-bar').width(percent);
			
			$('#album-file' + i).find('span.sr-only').html('已上传 ' + percent);
		},
		
		humanizeSize: function(size) {
	      var i = Math.floor( Math.log(size) / Math.log(1024) );
	      return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
	    }

	  }, $.album);
	
	$('#drag-and-drop-zone').dmUploader({
		url : '${siteurl}/image/upload.htm',
		dataType : 'json',
		allowedTypes : 'image/*',
		maxFiles : 6,
		onBeforeUpload : function(id) {
			$.album.updateFileStatus(id, 'default', '上传中...');
		},
		onNewFile : function(id, file) {
			$.album.addFile('#upload-albums', id, file);

			/*** 预览图片加载 ***/
			if (typeof FileReader !== "undefined") {

				var reader = new FileReader();

				// 获取最后添加的图片
				var img = $('#upload-albums').find('.uploader-image-preview>img').eq(0);

				reader.onload = function(e) {
					img.attr('src', e.target.result);
				};

				reader.readAsDataURL(file);

			} else {
				// 如果比支持 FileReader 清空所有预览
				$('#upload-albums').find('.uploader-image-preview').remove();
			}
		},
		onUploadProgress : function(id, percent) {
			var percentStr = percent + '%';
			$.album.updateFileProgress(id, percentStr);
		},
		onUploadSuccess : function(id, data) {
			$.album.updateFileStatus(id, 'success', '上传完成');
			$.album.updateFileProgress(id, '100%');
			$.album.updateFileData(id, data);
		},
		onUploadError : function(id, message) {
			$.album.updateFileStatus(id, 'error', '上传文件出错');
		},
		onFilesMaxError : function (file) {
			alert('图片个数已达限制');
		}
	});
	
	$(document).on('click', 'button[data-action="remove-album"]', function () {
		$(this).closest('div').remove();
		
		var i = $('#upload-albums').attr('file-counter');
		if (parseInt(i) > 0) {
			$('#upload-albums').attr('file-counter', i - 1);
		}
	});
	
	


</script>
</body>

</html>